<template>
  <div>
    <el-card>
      <el-row class="head" type="flex" justify="space-between" align="middle">
        <el-button type="primary" class="elButton" @click="isShowPage=true">添加页面</el-button>
        <div style="margin-top: 15px;" class="right">
          <el-input v-model="query.title_contains" placeholder="请输入内容">
            <el-button slot="append" @click="screEning">筛选</el-button>
          </el-input>
        </div>
      </el-row>
      <el-table
        :data="pageList"
        border
        style="width: 100%"
      >
        <el-table-column label="标题" prop="title" />
        <el-table-column
          label="内容"
          prop="content"
        >
          <template slot-scope="scope">
            <div class="VueEditor" v-html="scope.row.content" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="primary" @click="btnEditor(row.id)">编辑</el-button>
            <el-button type="danger" @click="btnDel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="query._limit"
        :current-page="current"
        @current-change="changePage"
        @size-change="sizeChange"
      />
    </el-row>
    <add-page ref="addPage" :is-show-page="isShowPage" />
  </div>
</template>

<script>
import AddPage from './components/addPage.vue'
import { getPageList, delPageList, countPage } from '@/api/page'
export default {
  components: {
    AddPage
  },
  data() {
    return {
      isShowPage: false,
      pageList: [],
      total: 0,
      current: 0,
      query: {
        _limit: 2,
        _start: 0,
        title_contains: ''
      }

    }
  },
  created() {
    this.getPageList()
  },
  methods: {
    // 分页
    async getPageList() {
      const data = await countPage(this.query)
      this.total = data.data
      // 获取总数据数
      const res = await getPageList(this.query)
      this.pageList = res.data
    },
    async  sizeChange(newPageSize) {
      this.query._limit = newPageSize
      const res = await getPageList(this.query)
      this.pageList = res.data
    },
    async changePage(newPage) {
      this.current = newPage
      this.query._start = (newPage - 1) * this.query._limit
      const res = await getPageList(this.query)
      this.pageList = res.data
    },
    // 查询
    async screEning() {
      this.query._start = 0
      this.query._limit = 2
      const res = await getPageList(this.query)
      this.pageList = res.data
      const data = await countPage(this.query)
      this.total = data.data
    },
    // 删除
    async btnDel(id) {
      await this.$confirm('是否删除')
      await delPageList(id)
      if (this.total - 1 === this.query._start) this.query._start = Math.ceil(this.query._start - this.query._limit)
      this.current = this.query._limit < 1 ? this.current - 1 : this.current
      this.$message.success('删除成功')
      this.getPageList()
    },
    async btnEditor(id) {
      await this.$refs.addPage.getAddPageList(id)
      this.isShowPage = true
    }

  }

}
</script>

<style >

.head {
margin-bottom: 25px;
border-bottom: 1px solid #ccc;
}
.right {
line-height: 90px;
}
.el-card {
margin: 20px;
}
.el-input-group {
width: 400px;
}
.el-table__row {
  height: 200px;
}
.el-table-column{
  height: 100%;
}
.VueEditor{
  max-height: 200px;
  overflow: auto;
}
</style>
